<template>
  <page-layout title="平台详情页" logo="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
    <detail-list size="large" :col="2" slot="headerContent" style="white-space: nowrap">
      <detail-list-item term="制作团队">未来道具研究小组</detail-list-item>
      <detail-list-item term="平台名称">城市管网井盖无线监测与预警系统</detail-list-item>
    </detail-list>
    <a-card class="transparent-card" :bordered="false">
      <detail-list title="平台详情">
        <detail-list-item term="项目全程">基于云端的城市管网井盖无线监测与预警系统</detail-list-item>
      </detail-list>
      <a-divider style="margin-bottom: 32px"/>
      <detail-list title="前端技术">
        <detail-list-item term="框架">Vue.js v2.6.11 —— 渐进式JavaScript框架</detail-list-item>
        <detail-list-item term="UI组件库">Ant Design of Vue</detail-list-item>
        <detail-list-item term="前端方案">Vue Antd Admin</detail-list-item>
        <detail-list-item term="地图组件">Amap-Vue</detail-list-item>
        <detail-list-item term="http库">axios</detail-list-item>
      </detail-list>
      <a-divider style="margin-bottom: 32px"/>
      <detail-list title="后端技术">
        <detail-list-item term="框架">Spring Boot</detail-list-item>
        <detail-list-item term="架构">三层架构 -- 表现层、业务逻辑层、持久层</detail-list-item>
        <detail-list-item term="持久层框架">MyBatis-Plus</detail-list-item>
        <detail-list-item term="数据库">阿里云-Mysql</detail-list-item>
      </detail-list>
      <a-divider style="margin-bottom: 32px"/>
    </a-card>
  </page-layout>
</template>

<script>
import DetailList from '../../components/tool/DetailList'
import PageLayout from '../../layouts/PageLayout'

const DetailListItem = DetailList.Item

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    scopedSlots: {customRender: 'name'},
  },
  {
    title: '班级',
    dataIndex: 'class',
  },
];

const teamData = [
  {
    key: '1',
    name: 'John Brown',
    class: '￥300,000.00',
  },
  {
    key: '2',
    name: 'Jim Green',
    class: '￥1,256,000.00',
  },
  {
    key: '3',
    name: 'Joe Black',
    class: '￥120,000.00',
  },
];

const goodsColumns = [
  {
    title: '商品编号',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '商品名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '商品条码',
    dataIndex: 'barcode',
    key: 'barcode'
  },
  {
    title: '单价',
    dataIndex: 'price',
    key: 'price',
    align: 'right'
  },
  {
    title: '数量（件）',
    dataIndex: 'num',
    key: 'num',
    align: 'right'
  },
  {
    title: '金额',
    dataIndex: 'amount',
    key: 'amount',
    align: 'right'
  }
]

const goodsData = [
  {
    id: '1234561',
    name: '矿泉水 550ml',
    barcode: '12421432143214321',
    price: '2.00',
    num: '1',
    amount: '2.00'
  },
  {
    id: '1234562',
    name: '凉茶 300ml',
    barcode: '12421432143214322',
    price: '3.00',
    num: '2',
    amount: '6.00'
  },
  {
    id: '1234563',
    name: '好吃的薯片',
    barcode: '12421432143214323',
    price: '7.00',
    num: '4',
    amount: '28.00'
  },
  {
    id: '1234564',
    name: '特别好吃的蛋卷',
    barcode: '12421432143214324',
    price: '8.50',
    num: '3',
    amount: '25.50'
  }
]

const scheduleColumns = [
  {
    title: '时间',
    dataIndex: 'time',
    key: 'time'
  },
  {
    title: '当前进度',
    dataIndex: 'rate',
    key: 'rate'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '操作员ID',
    dataIndex: 'operator',
    key: 'operator'
  },
  {
    title: '耗时',
    dataIndex: 'cost',
    key: 'cost'
  }
]

const scheduleData = [
  {
    key: '1',
    time: '2017-10-01 14:10',
    rate: '联系客户',
    status: 'processing',
    operator: '取货员 ID1234',
    cost: '5mins'
  },
  {
    key: '2',
    time: '2017-10-01 14:05',
    rate: '取货员出发',
    status: 'success',
    operator: '取货员 ID1234',
    cost: '1h'
  },
  {
    key: '3',
    time: '2017-10-01 13:05',
    rate: '取货员接单',
    status: 'success',
    operator: '取货员 ID1234',
    cost: '5mins'
  },
  {
    key: '4',
    time: '2017-10-01 13:00',
    rate: '申请审批通过',
    status: 'success',
    operator: '系统',
    cost: '1h'
  },
  {
    key: '5',
    time: '2017-10-01 12:00',
    rate: '发起退货申请',
    status: 'success',
    operator: '用户',
    cost: '5mins'
  }
]

export default {
  name: 'BasicDetail',
  components: {PageLayout, DetailListItem, DetailList},
  data() {
    return {
      goodsColumns,
      goodsData,
      scheduleColumns,
      scheduleData,
      // 记得删掉上面没用到的
      teamData,
      columns,
    }
  }
}
</script>

<style lang="less" scoped>
.transparent-card {
  background-color: rgba(0, 0, 0, 0.2);
}

.title {
  color: @title-color;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
</style>
